body, html {
  width: 100%;
  height: 100%; }

.canvas_wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3200;
  display: none; }
  .canvas_wrap #render {
    width: 100%;
    height: 100%;
    touch-action: none; }

.loading_wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3200;
  background-image: url(../img/loading/bg.jpg); }
  .loading_wrap img {
    position: absolute; }
  .loading_wrap .loading_logo {
    width: 4.59rem;
    left: 50%;
    margin-left: -2.295rem;
    top: 2rem; }
  .loading_wrap .loading_text {
    width: 1.77rem;
    left: 50%;
    margin-left: -0.885rem;
    top: 7.5rem; }
  .loading_wrap .loading_bear {
    width: 3.31rem;
    right: 0rem;
    bottom: 2rem; }

.video_wrap {
  width: 100%;
  height: 100%;
  position: relative; }
  .video_wrap #door {
    width: 100%;
    height: 100%;
    object-fit: cover; }
  .video_wrap .video_play {
    width: 2.85rem;
    height: auto;
    position: absolute;
    left: 50%;
    margin-left: -1.425rem;
    bottom: 2rem; }

.photo {
  display: none; }

.bear_wrap {
  display: none; }

.prize_wrap {
  display: none; }

.prize_step1 {
  display: none; }

.prize_step1_wrap {
  display: none; }

.backtime_wrap {
  display: none; }

.prizer_wrap {
  display: none; }

.body {
  width: 100%;
  height: 28.03rem;
  overflow: hidden;
  position: relative;
  background-image: url(../img/bg.jpg); }
  .body img {
    position: absolute;
    height: auto; }
  .body .photo {
    width: 100%;
    height: 5.46rem;
    position: absolute;
    top: 0;
    left: 0; }
    .body .photo .swiper_tip {
      width: 2.38rem;
      left: 50%;
      margin-left: -1.19rem;
      top: 1rem;
      z-index: 99;
      pointer-events: none; }
    .body .photo .swiper_arrow_wrap {
      width: 6.93rem;
      height: 0.38rem;
      position: absolute;
      left: 50%;
      margin-left: -3.465rem;
      top: 2.5rem;
      z-index: 120;
      pointer-events: none; }
      .body .photo .swiper_arrow_wrap .swiper_arrow {
        position: relative;
        height: 0.38rem; }
      .body .photo .swiper_arrow_wrap .swiper_arrow_left {
        float: left; }
      .body .photo .swiper_arrow_wrap .swiper_arrow_right {
        float: right; }
    .body .photo .photo_wrap {
      width: 100%;
      height: 4.4rem;
      margin-top: 1.2rem; }
      .body .photo .photo_wrap .swiper-slide {
        width: 7.5rem;
        height: 4.4rem; }
        .body .photo .photo_wrap .swiper-slide .swiper_bg {
          width: 100%; }
        .body .photo .photo_wrap .swiper-slide .swiper_cover {
          position: absolute;
          width: 1.23rem;
          height: 1.23rem;
          object-fit: contain; }
        .body .photo .photo_wrap .swiper-slide .swiper_cover1 {
          top: 0.53rem;
          left: 1.3rem;
          transform: rotate(-6deg);
          -webkit-transform: rotate(-6deg); }
        .body .photo .photo_wrap .swiper-slide .swiper_cover2 {
          top: 0.85rem;
          left: 3.25rem;
          transform: rotate(0deg);
          -webkit-transform: rotate(0deg); }
        .body .photo .photo_wrap .swiper-slide .swiper_cover3 {
          top: 0.6rem;
          left: 5.06rem;
          transform: rotate(5deg);
          -webkit-transform: rotate(5deg); }
        .body .photo .photo_wrap .swiper-slide .swiper_cover4 {
          top: 2.6rem;
          left: 1.74rem;
          transform: rotate(-8deg);
          -webkit-transform: rotate(-8deg); }
        .body .photo .photo_wrap .swiper-slide .swiper_cover5 {
          top: 2.65rem;
          left: 4.58rem;
          transform: rotate(15deg);
          -webkit-transform: rotate(15deg); }
  .body .video_wrap {
    width: 6.92rem;
    height: 7.37rem;
    background-image: url(../img/video_bg.png);
    position: absolute;
    left: 50%;
    margin-left: -3.46rem;
    top: 5.33rem; }
    .body .video_wrap .player#player-con {
      width: 6.32rem;
      height: 3.57rem;
      position: absolute;
      left: 50%;
      margin-left: -3.16rem;
      top: 2.49rem; }
    .body .video_wrap .light {
      width: 0.54rem;
      z-index: 800;
      top: 2.18rem; }
    .body .video_wrap .light1 {
      left: 1.05rem; }
    .body .video_wrap .light2 {
      right: 1.05rem; }
    .body .video_wrap .video_btn_wrap {
      width: 5.52rem;
      height: 1.05rem;
      position: absolute;
      left: 50%;
      margin-left: -2.76rem;
      bottom: 0; }
      .body .video_wrap .video_btn_wrap .video_btn {
        width: 2.46rem;
        top: 0.2rem; }
      .body .video_wrap .video_btn_wrap .video_btn1 {
        left: 0; }
      .body .video_wrap .video_btn_wrap .video_btn2 {
        right: 0; }
      .body .video_wrap .video_btn_wrap .video_btn3 {
        right: 0;
        display: none; }
  .body .bear_wrap {
    width: 100%;
    height: 2.14rem;
    position: absolute;
    top: 13.09rem;
    left: 0;
    background-image: url(../img/bear_bg1.png);
    background-size: 100% auto;
    background-position: 0rem -2.6rem;
    background-repeat: no-repeat; }
    .body .bear_wrap .bear_icon {
      width: 1.75rem;
      left: 0.28rem;
      top: 0; }
    .body .bear_wrap .naifen_icon {
      width: 0.97rem;
      top: 0.74rem;
      right: 0.85rem; }
    .body .bear_wrap .no_wrap {
      width: 2.79rem;
      height: 1.01rem;
      position: absolute;
      left: 50%;
      margin-left: -1.385rem;
      bottom: 0.57rem; }
      .body .bear_wrap .no_wrap .text_shandow {
        width: 3.01rem;
        left: -0.09rem;
        bottom: -0.09rem; }
      .body .bear_wrap .no_wrap .no_title {
        width: 1.61rem;
        left: 50%;
        margin-left: -0.805rem;
        top: 0; }
      .body .bear_wrap .no_wrap .number_wrap {
        width: 100%;
        height: 0.45rem;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -1.395rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center; }
        .body .bear_wrap .no_wrap .number_wrap .num_text {
          height: 0.45rem;
          position: relative;
          margin: 0 0.02rem; }
  .body .prize_wrap {
    width: 100%;
    height: 12.8rem;
    position: absolute;
    left: 0;
    top: 15.23rem; }
    .body .prize_wrap .plate_wrap_left {
      width: 4.55rem;
      height: 1.41rem;
      position: absolute;
      left: 0;
      background-image: url(../img/plate1.png); }
    .body .prize_wrap .plate_wrap_right {
      width: 4.04rem;
      height: 1.41rem;
      position: absolute;
      right: 0;
      background-image: url(../img/plate2.png); }
    .body .prize_wrap .plate_wrap1 {
      top: 3rem; }
      .body .prize_wrap .plate_wrap1 .camera {
        width: 3.17rem;
        bottom: 0.7rem; }
    .body .prize_wrap .plate_wrap2 {
      top: 5rem; }
      .body .prize_wrap .plate_wrap2 .erji {
        width: 2.58rem;
        bottom: 1rem;
        left: 0.5rem; }
    .body .prize_wrap .plate_wrap3 {
      top: 7rem; }
      .body .prize_wrap .plate_wrap3 .xinglixiang {
        width: 2.58rem;
        bottom: 0.9rem;
        left: 0.5rem; }
    .body .prize_wrap .plate_wrap4 {
      top: 9rem; }
      .body .prize_wrap .plate_wrap4 .naifen2 {
        width: 2.96rem;
        bottom: 1rem;
        left: 0.6rem; }
    .body .prize_wrap .plate_wrap5 {
      top: 11rem; }
      .body .prize_wrap .plate_wrap5 .hongbao {
        width: 2.83rem;
        bottom: 1rem;
        left: 0.5rem; }

.body.phased1 {
  height: 18.81rem; }
  .body.phased1 .prize_step1 {
    display: block;
    width: 100%;
    height: 6.64rem;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/step1/prize_stage.png); }
    .body.phased1 .prize_step1 .prize_step1_camera {
      width: 2.31rem;
      left: 2rem;
      bottom: 1.2rem;
      z-index: 150; }
    .body.phased1 .prize_step1 .prize_step1_erji {
      width: 1.57rem;
      left: 1.7rem;
      bottom: 1.7rem;
      z-index: 120; }
    .body.phased1 .prize_step1 .prize_step1_xinglixiang {
      width: 1.87rem;
      left: 0.3rem;
      bottom: 1.7rem;
      z-index: 100; }
    .body.phased1 .prize_step1 .prize_step1_naifen {
      width: 1.97rem;
      bottom: 1.7rem;
      right: 1.95rem;
      z-index: 120; }
    .body.phased1 .prize_step1 .prize_step1_hongbao {
      width: 1.64rem;
      bottom: 1.7rem;
      right: 0.6rem;
      z-index: 100; }
  .body.phased1 .video_wrap {
    top: 6.1rem;
    z-index: 1800; }
    .body.phased1 .video_wrap .video_btn_wrap .video_btn2 {
      display: none; }
    .body.phased1 .video_wrap .video_btn_wrap .video_btn3 {
      display: block;
      right: 0; }
  .body.phased1 .prize_step1_wrap {
    display: block;
    width: 7.5rem;
    height: 6.12rem;
    background-image: url(../img/step1/bottom_bg.png);
    position: absolute;
    z-index: 100;
    left: 0;
    bottom: 0; }
    .body.phased1 .prize_step1_wrap .prize_step1_tip {
      width: 4.49rem;
      left: 50%;
      margin-left: -2.245rem;
      top: 1.44rem; }
    .body.phased1 .prize_step1_wrap .prize_step1_shandow {
      width: 1.71rem;
      left: 50%;
      margin-left: -0.855rem;
      bottom: 2.2rem; }
    .body.phased1 .prize_step1_wrap .prize_step1_bear {
      width: 1.58rem;
      left: 0.8rem;
      bottom: 1.8rem; }
    .body.phased1 .prize_step1_wrap .prize_step1_naifenguan {
      width: 0.97rem;
      right: 1.2rem;
      bottom: 1.8rem; }
    .body.phased1 .prize_step1_wrap .prize_step1_num_wrap {
      width: 3.54rem;
      height: 0.34rem;
      position: absolute;
      left: 50%;
      margin-left: -1.77rem;
      bottom: 0.5rem; }
      .body.phased1 .prize_step1_wrap .prize_step1_num_wrap .prize_step1_num_title {
        width: 1.49rem;
        left: 0;
        top: 0; }
      .body.phased1 .prize_step1_wrap .prize_step1_num_wrap .prize_step1_num_number_wrap {
        width: 2.4rem;
        height: 100%;
        position: absolute;
        top: 0;
        left: 1.49rem; }
        .body.phased1 .prize_step1_wrap .prize_step1_num_wrap .prize_step1_num_number_wrap .prize_step1_num_number {
          height: 0.33rem;
          position: relative;
          float: left;
          margin: 0rem 0.02rem; }

.phased2.body .bear_wrap {
  display: block; }

.phased2.body .prize_wrap {
  display: block; }

.phased2.body .backtime_wrap {
  display: block;
  width: 6.07rem;
  height: 3.44rem;
  position: absolute;
  left: 50%;
  margin-left: -3.035rem;
  top: 1rem;
  background-image: url(../img/step2/time_bg.png); }
  .phased2.body .backtime_wrap .backtime_hour, .phased2.body .backtime_wrap .backtime_min, .phased2.body .backtime_wrap .backtime_sec {
    width: 1.05rem;
    height: 0.75rem;
    position: absolute;
    top: 1.3rem; }
    .phased2.body .backtime_wrap .backtime_hour .backtime_num, .phased2.body .backtime_wrap .backtime_min .backtime_num, .phased2.body .backtime_wrap .backtime_sec .backtime_num {
      position: relative;
      height: 100%; }
    .phased2.body .backtime_wrap .backtime_hour .backtime_num1, .phased2.body .backtime_wrap .backtime_min .backtime_num1, .phased2.body .backtime_wrap .backtime_sec .backtime_num1 {
      float: left; }
    .phased2.body .backtime_wrap .backtime_hour .backtime_num2, .phased2.body .backtime_wrap .backtime_min .backtime_num2, .phased2.body .backtime_wrap .backtime_sec .backtime_num2 {
      float: right; }
  .phased2.body .backtime_wrap .backtime_hour {
    left: 0.38rem; }
  .phased2.body .backtime_wrap .backtime_min {
    left: 2.45rem; }
  .phased2.body .backtime_wrap .backtime_sec {
    left: 4.5rem; }

.phased3.body .photo {
  display: block; }

.phased3.body .bear_wrap {
  display: block; }

.phased3.body .prize_wrap {
  display: block; }

.phased4.body {
  height: 36.1rem; }
  .phased4.body .photo {
    display: block; }
  .phased4.body .prize_wrap {
    display: block;
    top: 23.3rem; }
  .phased4.body .prizer_wrap {
    display: block;
    width: 6.48rem;
    height: 8.56rem;
    position: absolute;
    left: 50%;
    margin-left: -3.24rem;
    top: 14rem;
    background-image: url(../img/step4/prizer_bg.png); }
    .phased4.body .prizer_wrap .prizer_camera, .phased4.body .prizer_wrap .prizer_erji, .phased4.body .prizer_wrap .prizer_naifen, .phased4.body .prizer_wrap .prizer_xinglixiang {
      position: absolute;
      left: 50%; }
      .phased4.body .prizer_wrap .prizer_camera span, .phased4.body .prizer_wrap .prizer_erji span, .phased4.body .prizer_wrap .prizer_naifen span, .phased4.body .prizer_wrap .prizer_xinglixiang span {
        font-family: 'fzcy';
        color: #c81623; }
    .phased4.body .prizer_wrap .prizer_camera {
      width: 2.8rem;
      height: 0.5rem;
      margin-left: -1.4rem;
      top: 2rem;
      font-size: 0.3rem; }
      .phased4.body .prizer_wrap .prizer_camera span {
        float: left;
        padding: 0.05rem; }
    .phased4.body .prizer_wrap .prizer_erji {
      width: 2.8rem;
      height: 0.9rem;
      margin-left: -1.4rem;
      top: 3.5rem;
      font-size: 0.28rem; }
      .phased4.body .prizer_wrap .prizer_erji span {
        float: left;
        padding: 0.05rem; }
    .phased4.body .prizer_wrap .prizer_naifen {
      width: 4.66rem;
      height: 0.9rem;
      margin-left: -2.33rem;
      top: 5.15rem;
      font-size: 0.24rem; }
      .phased4.body .prizer_wrap .prizer_naifen span {
        float: left;
        transform: scale(0.9, 0.9);
        padding: 0.05rem; }
    .phased4.body .prizer_wrap .prizer_xinglixiang {
      width: 3.94rem;
      height: 0.5rem;
      margin-left: -1.97rem;
      top: 7.2rem;
      font-size: 0.26rem; }
      .phased4.body .prizer_wrap .prizer_xinglixiang span {
        float: left;
        padding: 0.07rem; }

.register_wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3100;
  background-image: url(../img/register/bg.jpg); }
  .register_wrap img {
    position: absolute;
    height: auto; }
  .register_wrap .register_from_wrap {
    width: 5.03rem;
    height: 7.4rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto; }
    .register_wrap .register_from_wrap .register_title {
      width: 4.59rem;
      left: 50%;
      margin-left: -2.295rem;
      top: 0; }
    .register_wrap .register_from_wrap .input_wrap {
      width: 4.91rem;
      height: 1.56rem;
      position: absolute;
      top: 3.47rem;
      left: 0rem;
      background-image: url(../img/register/from_bg.png); }
      .register_wrap .register_from_wrap .input_wrap .tel_input, .register_wrap .register_from_wrap .input_wrap .msg_input {
        position: absolute;
        outline: none;
        border: none;
        background-color: transparent;
        font-size: 0.28rem;
        color: #fff;
        box-sizing: border-box;
        padding: 0.05rem; }
      .register_wrap .register_from_wrap .input_wrap .tel_input {
        width: 4rem;
        height: 0.5rem;
        top: 0.05rem;
        left: 0.7rem; }
      .register_wrap .register_from_wrap .input_wrap .msg_input {
        width: 2.1rem;
        height: 0.48rem;
        top: 0.96rem;
        left: 0.7rem; }
      .register_wrap .register_from_wrap .input_wrap .getcode {
        display: block;
        color: #c12927;
        text-align: center;
        width: 1.78rem;
        height: 0.5rem;
        position: absolute;
        top: 0.95rem;
        right: 0.05rem;
        line-height: 0.5rem;
        font-size: 0.24rem; }
    .register_wrap .register_from_wrap .register_checkbox {
      height: 0.39rem;
      width: auto;
      left: 0.5rem;
      bottom: 1.44rem; }
    .register_wrap .register_from_wrap .register_text {
      width: 3.26rem;
      left: 1rem;
      bottom: 1.5rem; }
    .register_wrap .register_from_wrap .register_back, .register_wrap .register_from_wrap .register_submit {
      height: 0.73rem;
      width: auto;
      bottom: 0; }
    .register_wrap .register_from_wrap .register_back {
      left: 0rem; }
    .register_wrap .register_from_wrap .register_submit {
      right: 0rem; }
    .register_wrap .register_from_wrap .rule_btn {
      display: block;
      width: 1.5rem;
      height: 0.25rem;
      position: absolute;
      opacity: 0;
      bottom: 1.5rem;
      left: 2.8rem; }

.rule_wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3200;
  background-color: #b52d2c; }
  .rule_wrap .rule_cover_wrap {
    width: 6.77rem;
    height: 10.49rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto; }
    .rule_wrap .rule_cover_wrap .rule_cover {
      width: 6.77rem;
      position: absolute;
      top: 0;
      left: 0; }
  .rule_wrap .close_rule_btn {
    width: 0.5rem;
    position: absolute;
    top: 0.5rem;
    right: 0.25rem;
    z-index: 3200; }

.model_wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 3100;
  top: 0;
  left: 0;
  overflow: hidden;
  background-color: #9b2421; }
  .model_wrap .model_cover {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto; }
  .model_wrap .model_save {
    width: 1.67rem;
    position: absolute;
    left: 50%;
    margin-left: -0.835rem;
    bottom: 3.8rem;
    pointer-events: none; }
  .model_wrap .close_model_btn {
    position: absolute;
    width: 0.5rem;
    top: 0.5rem;
    right: 0.25rem;
    z-index: 3200; }

.preview {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5); }
  .preview .close_preview {
    width: 0.5rem;
    top: 0.5rem;
    right: 0.5rem;
    position: absolute;
    z-index: 3200; }
  .preview .preview-container {
    width: 100%;
    height: 100%; }
    .preview .preview-container .preview-wrapper {
      width: 100%;
      height: 100%; }
      .preview .preview-container .preview-wrapper .preview-slide {
        width: 100%;
        height: 100%;
        position: relative; }
        .preview .preview-container .preview-wrapper .preview-slide .preview_img {
          width: 100vw;
          height: 100vw;
          object-fit: contain;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto; }

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .video_wrap .video_play {
    bottom: 3rem; } }

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  .video_wrap .video_play {
    bottom: 3rem; } }

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .video_wrap .video_play {
    bottom: 3rem; } }
